import { computed, unref } from 'vue';
import { createGlobalState } from '@vueuse/shared';
import { useStorage } from '@vueuse/core';
import type { LocaleSetting } from './types';
import { localeSetting } from '@/settings/localeSetting';

export const useLocaleState = createGlobalState(() => {
  const localInfo = useStorage('local-info', localeSetting);
  const getLocale = computed(() => unref(localInfo).locale);

  function setLocaleInfo(info: Partial<LocaleSetting>) {
    localInfo.value = {
      ...localInfo.value,
      ...info
    };
  }

  function initLocale() {
    localInfo.value = {
      ...localeSetting,
      ...localInfo.value
    };
  }

  return {
    getLocale,
    setLocaleInfo,
    initLocale
  };
});
